<template>
  <ul class='list'>
    <li v-for="item in getListData">
      <img class="fl" :src="item.img" alt="">
      <div class="content pr">
        <p class="title">姓名：<span class="color999">{{item.name}}</span></p>
        <p class="info">电话：<span class="color999">{{item.phone | formatphone}}</span></p>
        <span class="pa color-gold btn-active" @click="showMoreInfo(item)">查看详情</span>
      </div>

    </li>
  </ul>
</template>
<script>
export default {
  props:["data"],
  components: {},
  name: "",
  data() {
    return {
      imgs:{
        // send:require('../../../assets/img/works/card/1.png')
      },
    };
  },
  computed:{
    getListData(){
      return this.data
    }
  },
  filters:{
    formatphone(val){
      return val.slice(0,3)+" "+val.slice(3,7)+" "+val.slice(7)
    }
  },
  methods: {
    showMoreInfo(item){
      // sessionStorage.setItem("userId",item.id)
      this.$router.push("/works/activities/suggestlist/detail")
    },

  },
  created() {}
};
</script>
<style lang="scss" scoped>
.list {
  margin: 0 15px;

  li{
    padding: 15px 0;
    min-height: 50px;
    border-bottom: 1px solid #f2f2f2;

    img{
      display: inline-block;
      width: 50px;
      height: 50px;
      border-radius: 50%;
    }

    .content{

      >span{
        right: 20px;
        top: 50%;
        line-height: 20px;
        transform: translateY(-50%);
        text-decoration: underline;
      }
      >span::after{
        position:absolute;
        z-index: 100;
        content: "";
        width: 0;
        height: 0;
        border: 5px solid transparent;
        border-left-color: #FF9F20;
        top: 50%;
        transform: translate(50%,-50%);
      }
    }
    p{
      margin: 5px 0 5px 65px;
      color: #333;
    }

    .info{
      margin-right: 20px;
    }
  }
}
</style>